<template>
	<view class="body">
		<view class="fixedbox">
			<image class="bg" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.MbnTEnikWqPN47b36d29885799816e6230755e5a108f.png" mode=""></image>
			<view class="head">
				<view class="head_left1" @tap="back()">
					<image src="../../../static/wode/return1.png" mode=""></image>
					<text>我的</text>
				</view>
				<text v-if="pagetype==''">入驻语言助学师</text>
				<text v-else>学习卡购买</text>
				<text class="head_right1"></text>
			</view>
			<swiper v-if="pagetype==''" :style="{height:fullHeight}" class="swiper-tall" :indicator-dots="indicatorDots"
			 :autoplay="autoplay" :previous-margin="previousMargin" :next-margin="nextMargin" :circular="circular" @change="change"
			 :current="swiperCurrentIndex">
				<swiper-item class="swiper-container" v-for="(item,index) in imgs" :key="index" :item-id="index" :data-year="index">
					<view class="swiper-item" :animation="animationData[index]" @tap="selectType(index)">
						<image v-if="item.select==true" class="select_type" src="../../../static/wode/select.png" mode=""></image>
						<image v-else class="select_type" src="../../../static/wode/unselect.png" mode=""></image>
						<view class="item_top">
							<text class="card_title">{{item.name}}</text>
							<text class="money">{{item.money}}</text>
							<text class="text1">({{item.time}})</text>
						</view>
						<view class="item_mid">
							<text class="title2">职位详情</text>
							<text class="text2" v-for="(item1,index1) in item.detail" :key="index1">· {{item1}}</text>
						</view>
						<view class="item_mid" v-if="item.need[0].select!=undefiend">
							<text class="title2">入驻要求</text>
							<view class="select_box" v-for="(item2,index2) in item.need" :key="index2" @tap.stop="selectNeed(index,index2)">
								<image class="select_need" src="../../../static/wode/select.png" v-if="item2.select==true" mode=""></image>
								<image class="select_need" src="../../../static/wode/unselect.png" v-else mode=""></image>
								<text class="text2">{{item2.text}}</text>
							</view>
						</view>
						<view class="item_mid" v-else>
							<text class="title2">入驻要求</text>
							<text class="text2" v-for="(item2,index2) in item.need" :key="index2">· {{item2}}</text>
						</view>
					</view>

				</swiper-item>
			</swiper>
			<swiper v-else :style="{height:fullHeight}" class="swiper-tall" :indicator-dots="indicatorDots" :autoplay="autoplay"
			 :previous-margin="previousMargin" :next-margin="nextMargin" :circular="circular" @change="change" :current="swiperCurrentIndex">
				<swiper-item class="swiper-container" v-for="(item,index) in studyCardList" :key="index" :item-id="index"
				 :data-year="index">
					<view class="swiper-item" :animation="animationData[index]">

						<view class="item_top">
							<text class="card_title">{{item.card_name}}</text>
						</view>
						<view class="price_box" v-for="(item1,index1) in item.studyPriceEntities" :key="index1" @tap="toSelectTaocan(index,index1)">
							<view class="price_left">
								<text class="price_name">{{item1.time_type}}</text>
								<text class="price1">¥{{item1.discount_amout}}</text>
								<text class="price2">¥{{item1.amout}}</text>
							</view>

							<!-- <text class="price_class">{{item1.course_num}}节</text> -->
							<text class="discount" v-if="index1===priceIndex&&index===selectIndex">{{item1.discount}}折</text>
							<image v-if="item1.select==true" src="../../../static/wode/select.png" mode=""></image>
							<image v-else class="" src="../../../static/wode/unselect.png" mode=""></image>
						</view>
						<view class="item_mid">
							<text class="title2">权益说明</text>
							<view class="select_box" v-for="(item2,index2) in quanyiList" :key="index2">
								<view class="text3" v-if="index==selectIndex"><text class="dian"></text><text>{{item2}}</text></view>
							</view>
						</view>
					</view>

				</swiper-item>
			</swiper>
		</view>

		<view class="explainBox" v-if="pagetype==''">
			<text class="title3">收益说明</text>
			<text class="text2">·助学师在好奇地球平台入驻不收取任何费用，可获得30%-60%的课程费用收益。</text>
		</view>
		<view class="body_bottom" v-if="pagetype==''">
			<view class="agreeBox" @tap="agreeThis">
				<image v-if="agree==true" src="../../../static/wode/select.png" mode=""></image>
				<image v-else src="../../../static/wode/unselect.png" mode=""></image>
				<text class="text1">我同意<text class="text4">《好奇地球入驻助学师说明》</text></text>
			</view>
			<view class="trueBtn" v-if="needTrue==true&&typeTrue==true&&agree==true" @tap="toJoin">
				立即入驻
			</view>
			<view class="btn2" v-else>
				立即入驻
			</view>
		</view>
		<view class="body_bottom" v-else>
			<text class="text1">购买即代表同意<text class="text4">《好奇地球学习卡购买协议》</text></text>
			<view class="trueBtn" v-if="taocanTrue==true" @tap="showTopay">
				立即购买
			</view>
			<view class="btn2" v-else>
				立即购买
			</view>
		</view>
		<pay :money="money" :isShow="isShow" :duration="duration" :newMember_level="newMember_level" :paytype="paytype"></pay>
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>

	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'
	import pay from '../../../components/pay.vue'
	export default {
		components: {
			mask,
			pay
		},
		data() {
			return {
				screenHeight: 0,
				animationData: {
					0: {},
					1: {},
					2: {},
					3: {}
				},
				title: '0',
				indicatorDots: false,
				autoplay: false,
				previousMargin: uni.upx2px(82) + 'px',
				nextMargin: uni.upx2px(82) + 'px',
				circular: true,
				zoomParam: 1.10,
				swiperCurrentIndex: 0,
				data: [],
				max: 0,
				imgs: [{
					name: '专业助学师',
					money: '88-108元/月',
					time: '30分钟每课时，共12课时',
					detail: [
						'负责为报名学员安排课程计划',
						'辅导学员语言学习',
						'在线和学员视频交流口语'
					],
					need: [{
							text: 'A 教学语言相关专业毕业，本科以上学历',
							select: false
						},
						{
							text: 'B 良好的教学语言能力，具备教学语言相关等级证书(专业4级、大学英语6级、公共英语4级）',
							select: false
						}
					],
					select: true
				}, {
					name: '跨境助学师',
					money: '128-168元/月',
					time: '30分钟每课时，共12课时',
					detail: [
						'负责为报名学员安排课程计划',
						'辅导学员语言学习',
						'在线和学员视频交流口语'
					],
					need: ['具备跨境语言能力',
						'在语言所在国有学习、工作、经商、生活经验'
					],
					select: false
				}, {
					name: '母语助学师',
					money: '198-258元/月',
					time: '30分钟每课时，共12课时',
					detail: [
						'负责为报名学员安排课程计划',
						'辅导学员语言学习',
						'在线和学员视频交流口语'
					],
					need: ['教学语言为本人母语'],
					select: false
				}, {
					name: '私教',
					money: '398-888元/月',
					time: '30分钟每课时，共12课时',
					detail: [
						'负责为报名学员安排课程计划',
						'辅导学员语言学习',
						'在线和学员视频交流口语'
					],
					need: [{
							text: 'A 教学语言为本人母语，从事或曾经从事母语语言教育、语言培训、翻译等相关工作',
							select: false
						},
						{
							text: 'B 有良好助学师经验，并获得好评',
							select: false
						}
					],
					select: false
				}],
				agree: false,
				needTrue: false,
				typeTrue: true,
				agreeTrue: true,
				type: '专业助学师',
				level: '',
				pagetype: '',
				studyCardList: [],
				isShowMask: false,
				money: '',
				isShow: false,
				duration: '',
				newMember_level: '',
				taocanTrue: false,
				quanyiList: '',
				selectIndex:'',
				priceIndex: '',
			}
		},
		computed: {
			fullHeight() {
				const res = uni.getSystemInfoSync();
				return res.windowHeight / 2 + uni.upx2px(300) + 'px';
			}
		},
		onLoad(option) {
			this.animation = uni.createAnimation();
			this.animation.scale(this.zoomParam).step();
			this.animationData[0] = this.animation.export();
			if (option.type != undefined) {
				this.pagetype = option.type
				this.getstudyCard()
			}
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			change(e) {
				this.swiperCurrentIndex = e.detail.current;
				this.title = e.detail.currentItemId;
				for (let key in this.animationData) {
					if (e.detail.currentItemId == key) {
						this.animation.scale(this.zoomParam).step();
						this.animationData[key] = this.animation.export();
					} else {
						this.animation.scale(1.0).step();
						this.animationData[key] = this.animation.export();
					}
				}
			},
			selectNeed(index, index2) {
				if (this.imgs[index].need[index2].select == false) {
					for (var i = 0; i < this.imgs[index].need.length; i++) {
						this.imgs[index].need[i].select = false
					}
					this.imgs[index].need[index2].select = true
					this.needTrue = true
					if (index2 == 0) {
						this.level = 'a'
					} else {
						this.level = 'b'
					}
				} else {
					this.imgs[index].need[index2].select = false
					this.needTrue = false
				}
			},
			selectType(index) {
				if (this.imgs[index].select == false) {
					for (var i = 0; i < this.imgs.length; i++) {
						this.imgs[i].select = false
					}
					this.imgs[index].select = true
					this.typeTrue = true
					this.type = this.imgs[index].name
				} else {
					this.imgs[index].select = false
					this.typeTrue = false
				}
				if (this.imgs[index].need[0].select != undefined) {
					for (var i = 0; i < this.imgs.length; i++) {
						if (this.imgs[i].need[0].select != undefined) {
							for (var j = 0; j < this.imgs[i].need.length; j++) {
								this.imgs[i].need[j].select = false
							}
						}
					}
					this.needTrue = false
				} else {
					this.needTrue = true
				}
			},
			agreeThis() {
				if (this.agree == false) {
					this.agree = true
				} else {
					this.agree = false
				}

			},
			getstudyCard() {
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'studyCard',
					actionName: 'query',
					data: {},
					successBack: function(res) {

						me.studyCardList = res.data.data

						for (var i = 0; i < me.studyCardList.length; i++) {
							me.studyCardList[i].equity_explain = me.studyCardList[i].equity_explain.split(',')
							for (var j = 0; j < me.studyCardList[i].studyPriceEntities.length; j++) {
								me.studyCardList[i].studyPriceEntities[j].select = false
								me.studyCardList[i].studyPriceEntities[j].equity_explain = me.studyCardList[i].studyPriceEntities[j].equity_explain
									.split('?')
							}
						}
						console.log(me.studyCardList, '学习卡')
					}
				})
			},
			toJoin() {
				uni.navigateTo({
					url: '../helpProve/helpProve?type=' + this.type + '&level=' + this.level
				})
			},
			toSelectTaocan(index, index1) {
				if (this.studyCardList[index].studyPriceEntities[index1].select == true) {
					this.studyCardList[index].studyPriceEntities[index1].select = false
					this.taocanTrue = false
					this.selectIndex = ""
					this.priceIndex = ""
				} else {
					for (var i = 0; i < this.studyCardList.length; i++) {
						for (var j = 0; j < this.studyCardList[i].studyPriceEntities.length; j++) {
							this.studyCardList[i].studyPriceEntities[j].select = false
						}
					}
					// this.studyCardList[index].studyPriceEntities[index1].select = true

					this.studyCardList[index].studyPriceEntities[index1] = Object.assign({}, this.studyCardList[index].studyPriceEntities[
						index1], {
						select: true,
					})
					this.quanyiList = this.studyCardList[index].studyPriceEntities[index1].equity_explain
					this.money = this.studyCardList[index].studyPriceEntities[index1].discount_amout
					this.selectIndex = index
					this.priceIndex = index1
					this.taocanTrue = true
				}
				console.log(index, index1)
			},
			closeMask() {
				this.isShow = false;
				this.isShowMask = false
			},
			// #ifdef APP-PLUS
			showTopay() {
				this.isShow = true;
				this.isShowMask = true;
			},
			// #endif
			
			//  #ifdef MP-WEIXIN
			showTopay() {
				var me = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes, '用户信息');
						var rcharge_valid = loginRes.code
						// 获取用户信息
			
						var data = {
							rcharge_type: 'account',
							user_id: uni.getStorageSync('user_id'),
							amount: me.money,
							source: 'sr',
							rcharge_account: me.mobile,
							rcharge_valid: rcharge_valid,
						}
			
						me.myAjaxNewPost({ //微信订单数据
							model: 'user',
							controllerName: 'pay',
							actionName: 'wxPay',
							data: data,
							successBack: function(res) {
								console.log(res)
								var paydata = res.data.data
								console.log(paydata, '支付信息')
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: paydata.timeStamp,
									nonceStr: paydata.nonceStr,
									package: paydata.package,
									signType: 'MD5',
									paySign: paydata.paySign,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										console.log(paydata.paySign, '支付')
										console.log('fail:' + JSON.stringify(err));
									}
								});
							},
						})
					}
				})
			},
			// #endif
		}
	}
</script>

<style scoped>
	.body {
		background: #FFFFFF;
		height: 100%;
	}

	.fixedbox {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		/* z-index: 999; */
	}

	.bg {
		height: 410upx;
		width: 100%;
		position: fixed;
		top: 0upx;
	}

	.head {
		display: flex;
		position: absolute;
		top: 90upx;
		align-items: center;
		justify-content: space-between;
		padding: 0 24upx;
		width: 100%;
		color: #FFFFFF;
		box-sizing: border-box;
		z-index: 9999;
	}

	.head_left1 {
		display: flex;
		align-items: center;
		font-size: 32upx;
		z-index: 9999;
	}

	.head .head_right1 {
		width: 88upx;
	}

	.head_left1 image {
		width: 20upx;
		height: 36upx;
		margin-right: 10upx;
	}

	.swiper-container {
		display: flex;
		align-items: center;
	}

	.swiper-item {
		margin-left: auto;
		margin-right: auto;
		/* height: 645upx; */
		width: 515upx;
		text-align: center;
		broder-radius: 6upx;
		border: 1upx solid #E6E6E6;
		z-index: 1200;
		background: #FFFFFF;
		border-radius: 20upx;
		box-shadow: 0px 7px 7px 0px rgba(70, 206, 207, 0.5);
		margin-top: 25%;
		text-align: left;
		position: relative;
		padding-bottom: 20upx;
	}

	.swiper-tall {
		display: flex;
		align-items: center;
		z-index: 1200;
	}

	.item_top {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50upx 40upx 38upx 40upx;
	}

	.card_title {
		color: #46CECF;
		font-size: 36upx;
		margin-bottom: 50upx;
		font-weight: bold
	}

	.money {
		color: #46CECF;
		font-size: 32upx;
	}

	.title2 {
		color: #46CECF;
		font-size: 28upx;
		margin-top: 20upx;
	}

	.text2 {
		color: #999999;
		font-size: 22upx;
		width: 95%;
	}

	.text1 {
		color: #999999;
		font-size: 24upx;
	}

	.text4 {
		color: #46CECF;
		font-size: 24upx;
	}

	.title3 {
		color: #666666;
		font-size: 28upx;
	}

	.item_mid {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0 30upx;
	}

	.select_need {
		width: 20upx;
		height: 20upx;
		margin-right: 10upx;
		margin-top: 8upx;
	}

	.select_box {
		display: flex;
		align-items: flex-start;
		/* flex-wrap: wrap; */
	}

	.select_box text {
		word-wrap: break-word
	}

	.select_type {
		position: absolute;
		top: 24upx;
		right: 16upx;
		width: 34upx;
		height: 34upx;
	}

	.explainBox {
		display: flex;
		flex-direction: column;
		padding: 0 24upx;
	}

	.agreeBox {
		display: flex;
		align-items: center;
		margin-bottom: 40upx;
	}

	.agreeBox image {
		width: 24upx;
		height: 24upx;
	}

	.btn2 {
		width: 702upx;
		height: 78upx;
		background: rgba(70, 206, 207, 1);
		opacity: 0.5;
		border-radius: 39upx;
		color: #FFFFFF;
		line-height: 78upx;
		text-align: center;
		font-size: 32upx;
		/* margin-left: 24upx; */
	}

	.trueBtn {
		background: #46CECF;
		width: 702upx;
		height: 78upx;
		border-radius: 39upx;
		color: #FFFFFF;
		line-height: 78upx;
		text-align: center;
		font-size: 32upx;
	}

	.body_bottom {
		position: absolute;
		bottom: 60upx;
		left: 24upx;
	}



	/* 购买学习卡 */
	.price_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 24upx;
		border-top: 1upx solid #E6E6E6;
		color: #999999;
		font-size: 28upx;
	}
	.price_left{
		position: relative;
	}

	.price_box image {
		width: 30upx;
		height: 30upx;
	}

	.price_name {
		color: #46CECF;
		font-size: 28upx;
		width: 90upx;
	}
	.price1{
		position: absolute;
		left: 110upx;
	}

	.price2 {
		color: #E6E6E6;
		font-size: 26upx;
		text-decoration: line-through;
		position: absolute;
		left: 220upx;
	}

	.discount {
		color: #FFFFFF;
		font-size: 20upx;
		background: #FF2A2A;
		border-radius: 6upx;
		height: 30upx;
		line-height: 30upx;
		padding: 0 6upx;
		position: absolute;
		left: 370upx;
	}

	.text3 {
		color: #999999;
		font-size: 22upx;
		line-height: 34upx;
		display: flex;
		align-items: center;
	}

	.dian {
		width: 10upx;
		height: 10upx;
		border-radius: 50%;
		background: #999999;
		margin-right: 10upx;
	}
</style>
